<template>
  <div class="tag-catalog-wrapper">
    <div class="tabControl" @click="showHeader = !showHeader" :class="{ hide: !showHeader }">
      <icon-svg name="iconArrow"></icon-svg>
    </div>
    <el-tabs tab-position="left" v-model="tabName" @tab-click="handleClick" :class="{ 'hide-header': !showHeader }">
      <el-tab-pane label="标签体系" name="catalog">
        <catalog ref="catalog"></catalog>
      </el-tab-pane>
      <el-tab-pane label="标签包" name="packet">
        <packet ref="packet"></packet>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import catalog from './catalog'
import packet from '../packet/packet'
export default {
  components: {
    catalog,
    packet
  },
  data() {
    return {
      tabName: 'catalog',
      showHeader: true
    }
  },
  mounted() {
    this.$nextTick(() => this.$refs[this.tabName].getList())
  },
  methods: {
    handleClick(tab) {
      this.$nextTick(() => this.$refs[tab.name].getList())
    }
  }
}
</script>

<style lang="scss">
.tag-catalog-wrapper {
  position: absolute;
  top: 60px;
  right: 15px;
  bottom: 15px;
  left: 0;
  .el-tabs {
    height: 100%;
    .el-tabs__header {
      width: 150px;
      transition: all 0.3s linear;
    }
    &.hide-header .el-tabs__header {
      width: 0;
    }
  }
  .el-tabs--left .el-tabs__item.is-left {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    height: 50px;
    line-height: 50px;
  }
  .tabControl {
    width: 15px;
    height: 20px;
    background-color: #f0ecec;
    border-left: 1px solid #e6e6e6;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 50%;
    left: 135px;
    margin-top: -7.5px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s linear;
    &:before,
    &:after {
      content: '';
      position: absolute;
      right: -0;
    }
    &:before {
      border-width: 15px 15px 0 0;
      border-style: solid;
      border-color: transparent#f0ecec transparent transparent;
      margin-top: -15px;
    }
    &:after {
      border-width: 15px 0 0 15px;
      border-style: solid;
      border-color: #f0ecec transparent transparent transparent;
      margin-top: 20px;
    }
    &.hide {
      left: 0;
      transform: rotate(180deg);
    }
    svg {
      width: 100%;
      height: 100%;
      color: #aaa;
    }
  }
  .el-tabs--left {
    .el-tabs__header.is-left {
      margin-right: 15px;
    }
    .el-tabs__active-bar {
      background-color: #f0ecec;
    }
    .el-tabs__content {
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        overflow: auto;
      }
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(144, 147, 153, 0.5);
      }
    }
  }
}
</style>
